AngularJS Events

AngularJS ইভেন্ট শিখুন

AngularJS Events

AngularJS এর ​​নিজস্ব HTML ইভেন্ট নির্দেশিকা রয়েছে।

টিপ:

AngularJS ইভেন্ট নির্দেশিকাগুলি HTML ইভেন্টগুলিকে ওভাররাইড করে না, উভয় ইভেন্টই কার্যকর করা হয়।

AngularJS ইভেন্ট নির্দেশিকা

আপনি এই নির্দেশাবলীর এক বা একাধিক ব্যবহার করে আপনার HTML উপাদানগুলিতে AngularJS ইভেন্ট শ্রোতাদের যোগ করতে পারেন:

ইভেন্টে ক্লিক করুন

  • ng-click
  • ng-dblclick
  • ng-mousedown
  • ng-mouseup

কীবোর্ড ইভেন্ট

  • ng-keydown
  • ng-keypress
  • ng-keyup

মাউস আন্দোলনের ঘটনা

  • ng-mouseover
  • ng-mouseenter
  • ng-mousemove
  • ng-mouseleave

অন্যান্য ঘটনা

  • ng-blur
  • ng-change
  • ng-focus
  • ng-copy
  • ng-cut
  • ng-paste

ইভেন্ট নির্দেশাবলী AngularJS ফাংশনগুলি নির্দিষ্ট ব্যবহারকারীর ইভেন্টগুলিতে কার্যকর করার অনুমতি দেয়।

পয়েন্টার ইভেন্ট

পয়েন্টার ইভেন্টগুলি ঘটে যখন কার্সার একটি উপাদানের উপর চলে যায়, এই ক্রমে:

ng-mouseover
ng-mouseenter
ng-mousemove
ng-mouseleave

অথবা যখন একটি মাউস বোতাম একটি উপাদানে ক্লিক করা হয়, এই ক্রমে:

ng-mousedown
ng-mouseup
ng-click

আপনি যেকোনো HTML উপাদানে পয়েন্টার ইভেন্ট যোগ করতে পারেন।

Example

যখন মাউস H1 উপাদানের উপর চলে যায় তখন গণনা পরিবর্তনশীল বৃদ্ধি করুন:

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-mousemove="count = count + 1">Mouse over me!</h1>

<h2>{{ count }}</h2>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
});
</script>

ng-ক্লিক নির্দেশিকা

এনজি-ক্লিক নির্দেশিকা AngularJS কোডকে সংজ্ঞায়িত করে যা উপাদানটি ক্লিক করার সময় কার্যকর করা হবে।

Example

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="count = count + 1">Click me!</button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
});
</script>

আপনি একটি ফাংশন নির্দিষ্ট করতে পারেন:

Example

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunction()">Click me!</button>

<p>{{ count }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
  $scope.myFunction = function() {
    $scope.count++;
  }
});
</script>

টগল করুন, সত্য/মিথ্যা

আপনি যদি একটি বোতামে ক্লিক করার সময় এইচটিএমএল কোডের একটি অংশ দেখাতে চান এবং বোতামটি আবার ক্লিক করার সময় এটিকে লুকাতে চান, একটি ড্রপডাউন মেনুর মতো একটি টগল সুইচ হিসাবে বোতামটিকে প্রয়োগ করুন:

Click Me

Example

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunc()">Click Me!</button>

<div ng-show="showMe">
  <h1>Menu:</h1>
  <div>Pizza</div>
  <div>Pasta</div>
  <div>Pesce</div>
</div>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.showMe = false;
  $scope.myFunc = function() {
    $scope.showMe = !$scope.showMe;
  }
});
</script>

showMe ভেরিয়েবলটি মিথ্যার বুলিয়ান মান দিয়ে শুরু হয়।

ফাংশন myFunc! (না) অপারেটর ব্যবহার করে শোমি ভেরিয়েবলকে এটির বিপরীতে সেট করে।

রূপান্তর যুক্তি:

showMe = !showMeshowMe এর বর্তমান মান নেয় এবং এর সাথে প্রতিস্থাপন করে:

  • false → true
  • true → false

এটি একটি সুইচিং প্রক্রিয়া তৈরি করে।

$ইভেন্ট অবজেক্ট

ফাংশন কল করার সময় আপনি আর্গুমেন্ট হিসাবে $event অবজেক্ট পাস করতে পারেন।

$event অবজেক্টে ব্রাউজারের ইভেন্ট অবজেক্ট রয়েছে:

Example

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-mousemove="myFunc($event)">Mouse Over Me!</h1>

<p>Coordinates: {{x + ', ' + y}}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.myFunc = function(myE) {
    $scope.x = myE.clientX;
    $scope.y = myE.clientY;
  }
});
</script>
$ইভেন্ট বৈশিষ্ট্য ব্যাখ্যা সুবিধা
clientX, clientY পয়েন্টার স্থানাঙ্ক মাউস অবস্থান খুঁজে বের করতে
keyCode কী কোড চাপা কী সনাক্ত করতে
target লক্ষ্য উপাদান ইভেন্টের সূচনাকারী উপাদান
type ইভেন্টের ধরন ঘটনার ধরন সনাক্ত করতে

ব্যবহারিক উদাহরণ

কার্টে যোগ করুন

ক্রেতা কার্টে আইটেম যোগ করতে ng-ক্লিক ব্যবহার করুন

অনুসন্ধান

এন্টার কী চাপলে লুকআপ চালানোর জন্য ng-keyup ব্যবহার করুন

আইটেম সম্প্রসারণ

ছবি ক্লিক করার সময় প্রসারিত করতে ng-ক্লিক ব্যবহার করুন

ফর্ম বৈধতা

ক্ষেত্র ছেড়ে যাওয়ার সময় ডেটা পরীক্ষা করতে ng-blur ব্যবহার করুন

ব্যায়ামের মাধ্যমে শেখা

নিম্নলিখিত কোডে, $event অবজেক্টটি কিসের জন্য ব্যবহৃত হয়?

<h1 ng-mousemove="getCoordinates($event)">Mouse Over Me!</h1>
মাউস ইভেন্ট ব্লক করতে
✗ ভুল! $event ইভেন্ট ব্লক করে না।
ইভেন্ট তথ্য পেতে
✓ ঠিক আছে! $event ইভেন্ট অবজেক্টে বিশদ বিবরণ থাকে যেমন পয়েন্টার স্থানাঙ্ক।
অনুষ্ঠান বিলম্বিত করার জন্য
✗ ভুল! ইভেন্ট বিলম্ব করতে $event ব্যবহার করা হয় না।
ইভেন্ট সতর্কতা বন্ধ করতে
✗ ভুল! ইভেন্ট প্রিম্পশন নিয়ন্ত্রণ করতে $event ব্যবহার করা হয় না।

প্রশিক্ষণ শুরু করুন:

উপরের ব্যায়াম চেষ্টা করুন. প্রতিটি অপশনে ক্লিক করুন এবং সঠিক উত্তর চেক করুন।

AngularJS ইভেন্টগুলি আয়ত্ত করার জন্য এই ধারণাগুলি গুরুত্বপূর্ণ।

ইভেন্ট সিকোয়েন্স রেফারেন্স

মাউস ক্লিক ক্রম

  1. ng-mousedown
  2. ng-mouseup
  3. ng-click

মাউস আন্দোলনের ক্রম

  1. ng-mouseover
  2. ng-mouseenter
  3. ng-mousemove
  4. ng-mouseleave

কীবোর্ড লেআউট

  1. ng-keydown
  2. ng-keypress
  3. ng-keyup

মনে রাখবেন:

AngularJS ইভেন্ট নির্দেশিকা HTML ইভেন্টগুলিকে ওভাররাইড করে না। উভয় সক্রিয় করা হবে.

উদাহরণ:onclickএবংng-clickউভয় সক্রিয় করা হবে.